<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    destroyOnClose
    title="编辑代付信息"
    @click="handleOk"
    width="700px"
  >
    <a-form @submit="submitFunc" ref="formRef" :model="formState" :labelCol="{ span: 5 }">
      <a-form-item label="代付类型" name="code" required>
        <a-select v-model:value="formState.code" placeholder="请选择代付类型" :options="options" />
      </a-form-item>
      <a-form-item label="报备姓名" required>
        <a-input v-model:value="formState.name" placeholder="请输入报备姓名" />
      </a-form-item>
      <a-form-item label="报备账号" required>
        <a-input v-model:value="formState.account" placeholder="请输入报备账号" />
      </a-form-item>
      <a-form-item label="报备银行名称" required>
        <a-input v-model:value="formState.bank" />
      </a-form-item>
      <a-form-item label="备注">
        <a-input v-model:value="formState.remark" placeholder="请输入备注" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { GetCollectionListApi, EditReportApi } from '@/api/payment';
  import message from '@/views/form-design/utils/message';

  const options = ref([]);

  const formState = ref({
    id: '',
    code: '',
    name: '',
    account: '',
    bank: '',
    remark: '',
    qrc: '',
  });
  let reloadFunc = () => {};
  const [register, { closeModal }] = useModalInner(async ({ record, reload }) => {
    formState.value = {
      id: record.id,
      code: record.code,
      name: record.name,
      account: record.account,
      bank: record.bank,
      remark: record.remark,
      qrc: record.qrc,
    };
    reloadFunc = reload;
    options.value = [];
    const bank = await GetCollectionListApi({});
    Object.keys(bank).forEach((item) => {
      options.value.push({
        label: bank[item],
        value: item,
      });
    });
  });

  const handleOk = () => {
    submitFunc(formState.value);
  };

  const submitFunc = (e) => {
    EditReportApi(e).then(() => {
      message.success('添加成功');
      reloadFunc();
      closeModal();
    });
  };
</script>
